import React, { useEffect, useState, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Menu, X, Search, ChevronDown, ArrowRight } from 'lucide-react';
export function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isActivitiesOpen, setIsActivitiesOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const searchRef = useRef(null);
  const navigate = useNavigate();
  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleActivities = () => setIsActivitiesOpen(!isActivitiesOpen);
  const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
  // Close search when clicking outside
  useEffect(() => {
    function handleClickOutside(event) {
      if (searchRef.current && !searchRef.current.contains(event.target)) {
        setIsSearchOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  // Mock search function - in a real app, this would search an API or database
  const handleSearch = e => {
    e.preventDefault();
    if (searchQuery.trim()) {
      // Mock search results based on query
      const mockResults = [{
        type: 'guide',
        title: 'Hiking Guide: ' + searchQuery,
        path: '/guides/hiking'
      }, {
        type: 'gear',
        title: 'Backpack: ' + searchQuery,
        path: '/gear/backpack'
      }, {
        type: 'activity',
        title: 'Trail & Trek: ' + searchQuery,
        path: '/activities/hiking'
      }];
      setSearchResults(mockResults);
    } else {
      setSearchResults([]);
    }
  };
  const handleSearchItemClick = path => {
    navigate(path);
    setIsSearchOpen(false);
    setSearchQuery('');
    setSearchResults([]);
  };
  const activities = [{
    name: 'Trail & Trek',
    path: '/activities/hiking'
  }, {
    name: 'On The Rock',
    path: '/activities/climbing'
  }, {
    name: 'On The Water',
    path: '/activities/water'
  }, {
    name: 'On Two Wheels',
    path: '/activities/cycling'
  }, {
    name: 'Camp & Survive',
    path: '/activities/camping'
  }];
  return <nav className="bg-carbon-black py-4 px-4 md:px-8 sticky top-0 z-50 border-b border-gray-800">
      <div className="container mx-auto">
        <div className="flex justify-between items-center">
          {/* Logo */}
          <Link to="/" className="flex items-center">
            <span className="font-display text-2xl md:text-3xl text-outdoor-orange">
              OPENGO HUB
            </span>
            <span className="hidden md:inline-block text-xs ml-2 bg-outdoor-orange px-2 py-0.5 rounded">
              冒险装备智库
            </span>
          </Link>
          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            <Link to="/activities" className="font-display text-lg hover:text-outdoor-orange transition-colors">
              ACTIVITIES
            </Link>
            <div className="relative group">
              <button className="flex items-center font-display text-lg hover:text-outdoor-orange transition-colors" onClick={toggleActivities}>
                CATEGORIES <ChevronDown size={16} className="ml-1" />
              </button>
              <div className={`absolute left-0 mt-2 w-64 bg-carbon-black border border-gray-800 shadow-lg rounded-md transition-all duration-300 ${isActivitiesOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
                {activities.map(activity => <Link key={activity.path} to={activity.path} className="block px-4 py-3 hover:bg-earth-dark hover:text-outdoor-orange transition-colors" onClick={() => setIsActivitiesOpen(false)}>
                    {activity.name}
                  </Link>)}
              </div>
            </div>
            <Link to="/guides" className="font-display text-lg hover:text-outdoor-orange transition-colors">
              GUIDES
            </Link>
            <Link to="/community" className="font-display text-lg hover:text-outdoor-orange transition-colors">
              BASE CAMP
            </Link>
            <button className="text-sand-light hover:text-outdoor-orange transition-colors" onClick={toggleSearch}>
              <Search size={20} />
            </button>
          </div>
          {/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            <button onClick={toggleSearch} className="text-sand-light mr-4">
              <Search size={20} />
            </button>
            <button onClick={toggleMenu} className="text-sand-light">
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
        {/* Search Overlay - Desktop & Mobile */}
        {isSearchOpen && <div className="absolute left-0 right-0 mt-4 px-4 z-50" ref={searchRef}>
            <div className="bg-earth-dark border border-gray-700 rounded-lg shadow-lg p-4 mx-auto max-w-3xl">
              <form onSubmit={handleSearch} className="relative">
                <input type="text" placeholder="Search for gear, guides, activities..." className="w-full bg-carbon-black border border-gray-700 rounded-md px-4 py-3 pr-10 text-sand-light focus:outline-none focus:border-outdoor-orange" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} autoFocus />
                <button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-outdoor-orange">
                  <Search size={18} />
                </button>
              </form>
              {searchResults.length > 0 && <div className="mt-4 border-t border-gray-700 pt-4">
                  <h3 className="font-display text-sm text-gray-400 mb-2">
                    SEARCH RESULTS
                  </h3>
                  <ul className="space-y-2">
                    {searchResults.map((result, index) => <li key={index}>
                        <button onClick={() => handleSearchItemClick(result.path)} className="w-full text-left px-3 py-2 hover:bg-carbon-black rounded-md flex justify-between items-center">
                          <div>
                            <span className="text-outdoor-orange text-xs uppercase">
                              {result.type}
                            </span>
                            <p className="text-sand-light">{result.title}</p>
                          </div>
                          <ArrowRight size={16} className="text-gray-500" />
                        </button>
                      </li>)}
                  </ul>
                </div>}
              <div className="mt-4 flex flex-wrap gap-2">
                <span className="text-gray-400 text-sm">Popular:</span>
                <button onClick={() => setSearchQuery('hiking boots')} className="text-sm text-outdoor-orange hover:underline">
                  hiking boots
                </button>
                <button onClick={() => setSearchQuery('ultralight tent')} className="text-sm text-outdoor-orange hover:underline">
                  ultralight tent
                </button>
                <button onClick={() => setSearchQuery('climbing harness')} className="text-sm text-outdoor-orange hover:underline">
                  climbing harness
                </button>
              </div>
            </div>
          </div>}
        {/* Mobile Navigation */}
        {isMenuOpen && <div className="md:hidden mt-4 py-2 border-t border-gray-800">
            <Link to="/activities" className="block py-3 font-display text-lg hover:text-outdoor-orange transition-colors">
              ACTIVITIES
            </Link>
            <button onClick={toggleActivities} className="w-full text-left py-3 font-display text-lg flex justify-between items-center">
              CATEGORIES
              <ChevronDown size={16} className={`transform transition-transform ${isActivitiesOpen ? 'rotate-180' : ''}`} />
            </button>
            {isActivitiesOpen && <div className="pl-4 border-l border-gray-800 mb-2">
                {activities.map(activity => <Link key={activity.path} to={activity.path} className="block py-2 hover:text-outdoor-orange transition-colors" onClick={toggleMenu}>
                    {activity.name}
                  </Link>)}
              </div>}
            <Link to="/guides" className="block py-3 font-display text-lg hover:text-outdoor-orange transition-colors">
              GUIDES
            </Link>
            <Link to="/community" className="block py-3 font-display text-lg hover:text-outdoor-orange transition-colors">
              BASE CAMP
            </Link>
          </div>}
      </div>
    </nav>;
}